<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">

<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


    <title>在线音乐服务器</title>

    <link rel="shortcut icon" href="#"/>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <!-- <script src="js/bootstrap.min.js"></script>-->
    <style type="text/css">
        td,
        th {
            text-align: center;
        }
    </style>

    <script type="text/javascript">
        <!-- 核心代码实现 -->
        $(function () {
            load();
            //用户退出
            $("#out").click(function () {
                    $.ajax({
                        type: 'post',
                        url: '/user/out',
                        success: function () {
                            console.log(" 退出！！！！ ")


                        }
                    });
                }
            );
        });

        function load(musicName) {
            //没有歌曲名称，查询全部歌曲
            $.ajax({
                type: "get",
                url: "/music/findMusic",
                data: {"musicName": musicName},
                success: function (obj) {
                    var data = obj.data;
                    console.log(data)
                    var s = '';
                    for (var i = 0; i < data.length; i++) {
                        var musicUrl = data[i].url + ".mp3" + "&" + data[i].singer + "&" + data[i].title;
                        s += '<tr>';
                        s += '<th> <input id="' + data[i].id + '"type="checkbox"> </th > ';
                        s += '<td>' + data[i].title + '</td>';
                        s
                            += '<td>' + data[i].singer + '</td>';
                        s
                            += '<td> <button class="btn btn-primary" onclick = "playerSong(\'' + musicUrl + ' \')"> 播放歌曲 </button> ' + '</td>';
                        s += '<td> <button class="btn btn-primary" onclick="deleteInfo(' + data[i].id + ')"> 删除 </button>' +
                            ' <button class="btn btn-primary" onclick="loveInfo(' + data[i].id + ')"> 收藏 </button> ' + '</td> ';
                        s += '</tr>'
                    }
                    $("#info").html(s);

                }
            });
        }

        function playerSong(obj) {
            console.log(obj)
            let data = obj.split('&')
            let url = data[0];
            let singer = data[1];
            let title = data[2];
            console.log(url)
            console.log(singer)
            console.log(title)
            // 发起AJAX请求获取MP3数据
            fetch(url) // 替换为你的后端API路径
                .then(response => response.blob())
                .then(blob => {
                    // 将Blob对象转换为URL对象
                    const url = URL.createObjectURL(blob);
                    // 设置音频元素的src属性
                    const audioPlayer = document.getElementById('audioPlayer');
                    audioPlayer.src = url;
                    // 监听音频加载事件
                    audioPlayer.addEventListener('loadedmetadata', () => {
                        // 更新进度条宽度和时间标签
                        const progressBar = document.getElementById('progressBar');
                        const currentTimeLabel = document.getElementById('currentTimeLabel');
                        const totalTimeLabel = document.getElementById('totalTimeLabel');
                        const totalMinutes = Math.floor(audioPlayer.duration / 60);
                        const totalSeconds = Math.floor(audioPlayer.duration % 60).toString().padStart(2, '0');
                        totalTimeLabel.innerText = `${totalMinutes}:${totalSeconds}`;
                        audioPlayer.addEventListener('timeupdate', () => {
                            const percentage = (audioPlayer.currentTime / audioPlayer.duration) * 100;
                            progressBar.style.width = percentage + '%';
                            const currentMinutes = Math.floor(audioPlayer.currentTime / 60);
                            const currentSeconds = Math.floor(audioPlayer.currentTime % 60).toString().padStart(2, '0');
                            currentTimeLabel.innerText = `${currentMinutes}:${currentSeconds}`;
                        });
                    });
                })
                .catch(error => console.error('Error fetching MP3 data:', error));

            document.querySelector(".song-name").innerHTML = '';
            document.querySelector(".song-name").innerHTML = title  +singer;
            //TODO 更改下方图片img.url
            //document.querySelector(".song-image").src = "url";
        }

        function deleteInfo(id) {
            //根据 musicId 删除歌曲
            $.ajax({
                type: "post",
                url: "/music/delete",
                data: {"id": id},
                success: function (data) {
                    if (data.status == 200) {
                        alert("删除成功");
                        window.location.href = "list.html";
                    } else {
                        alert("删除成功");
                        window.location.href = "list.html";
                    }
                }
            });
        }

        $(function () {
            //根据歌曲名称查询
            $("#submit1").click(function () {
                var name = $("#exampleInputName2").val();
                load(name);
            });

            //删除选中的歌曲
            $.when(load).done(function () {
                $("#delete").click(function () {
                    var id = new Array();
                    var i = 0;

                    $("input:checkbox").each(function () {
                        if ($(this).is(':checked')) {
                            id[i] = $(this).attr("id");
                            i++;
                        }

                    });
                    console.log(id);

                    $.ajax({
                        type: "post",
                        url: "/music/deleteSel",
                        data: {"id": id},
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            if (data.data == true) {
                                alert("删除成功");
                                window.location.href = "list.html";
                            } else {
                                alert("删除成功");
                                window.location.href = "list.html";
                            }
                        }
                    });
                });
            });

        });


        function loveInfo(id) {
            //收藏音乐
            $.ajax({
                type: "post",
                url: "/lovemusic/likeMusic",
                data: {"id": id},
                success: function (data) {
                    if (data.status == 200) {
                        alert("收藏成功");
                        window.location.href = "list.html";
                    } else {
                        alert("收藏失败");

                    }
                }
            });
        }

        $(function () {
            //更新用户图像
            $.ajax({
                type: 'get',
                url: '/image/getImage',
                success: function (obj) {
                    console.log(obj.username);
                    console.log(obj.url);


                    var s = '';
                    s += '<h3>' + obj.username + '<img id="userImage" src="'
                        + obj.preurl + obj.url + '" style="width: 50px;height: 50px;" > </h3> ';
                    $("#showImage").html(s);
                    $("#userImage").click(function () {
                        window.location.href = "imageUpload.html";

                    });
                }
            });
            //给用户图像设置点击功能，点击后跳转到上传图像界面
            $("#userImage").click(function () {
                window.location.href = "imageUpload.html";

            });


            //用户退出
            $("#out").click(function () {
                    $.ajax({
                        type: 'post',
                        url: '/user/out',
                        success: function () {
                            window.location.href = "login.html";

                        }
                    });
                }
            );


        });


        function changeBackground(obj) {
            var div = document.getElementById("mainDiv");
            div.style.backgroundImage = "\"" + obj.preurl + obj.url + "\"";
        }

    </script>


    <style>
        /* 容器样式 */
        .player-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }

        /* 歌曲图片样式 */
        .song-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-bottom: 20px;
            margin-right: 40px;
        }

        /* 歌曲名称样式 */
        .song-name {
            font-size: 16px;
            margin-bottom: 20px;
            width: fit-content;
        }

        /* 播放/暂停按钮样式 */
        .play-pause-button {
            width: 60px;
            height: 60px;
        }

        /* 进度条容器样式 */
        .progress-container {
            width: 750px;
            background-color: #f3f3f3;
            border-radius: 25px;
            overflow: hidden;
            height: 15px; /* 设置进度条的高度 */
            margin: 20px 0;
            position: relative; /* 使时间标签相对于进度条定位 */
        }

        /* 实际进度条样式 */
        .progress-bar {
            height: 100%;
            width: 0;
            background-color: #4caf50; /* 默认绿色 */
            text-align: center;
            line-height: 30px; /* 与容器高度一致 */
            color: white;
            transition: width 0.4s ease;
        }

        /* 修改进度条颜色为蓝色 */
        .progress-bar.blue {
            background-color: #007bff; /* 蓝色 */
        }

        /* 隐藏audio标签 */
        #audioPlayer {
            display: none; /* 或者使用 visibility: hidden; */
        }

        /* 时间标签样式 */
        .time-label {
            position: absolute;
            top: 0;
            left: 75%;
            transform: translateX(-50%);
            color: black; /* 黑色字体 */
            font-size: 14px;
        }

        /* 当前时间和总时间的样式 */
        .current-time {
            color: black; /* 黑色字体 */
            font-size: 14px;
        }

        .total-time {
            color: black; /* 黑色字体 */
            font-size: 14px;
        }

        /* 控制按钮样式 */
        .control-buttons {
            display: flex;
            width: 100%;
            max-width: 300px;
            margin-left: 40px;
            justify-content: space-around;
        }

        #volumeControl {
            width: 24px;
            height: 25px;
        }

        #loopControl {
            width: 20px;
            height: 20px;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .content {
            height: 2000px; /* 使页面有足够的高度来滚动 */
        }

        .player-container {
            position: fixed;
            bottom: 0;
            width: 1500px;
            /*left: 1%;*/
            background: white;
        }
    </style>
    
</head>

<body id="body">

<div class="content">
    <div class="container">


        <h3 style="text-align: center"> 在线音乐服务器 </h3>


        <div style="text-align: right;" id="showImage"><h3>niaho <img id="userImage" src="E:/JAVACODE/music/image/1.jpg"
                                                                      style="width: 50px; height: 50px; ">
            <!--<a id="out" class="btn btn-primary" >退出</a> -->
        </h3>
        </div>
        <div style="float: left;">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">歌曲名</label>
                    <input name="name" type="text" class="form-control" id="exampleInputName2">
                </div>
                <button id="submit1" type="button" class="btn btn-primary">查询</button>
            </form>
        </div>

        <div style="float: right;margin-bottom: 15px">
            <a class="btn btn-primary" href="loveMusic.html">喜欢列表</a>
            <a class="btn btn-primary" href="upload.html">添加歌曲</a>
            <a id="delete" class="btn btn-primary">删除选中</a>
            <a id="out" class="btn btn-primary">退出</a>
        </div>
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th>选择</th>
                <th>歌名</th>
                <th>歌手</th>
                <th>歌曲</th>
                <th>操作</th>
            </tr>
            <tbody id="info" valign="middle" >

            </tbody>
        </table>
    </div>
</div>

<div class="player-container">
    <img class="play-pause-button" id="playPauseButton" src="./img/start.png"></img>
    <div style="display: flex; justify-content: space-around;align-items: center; ">
        <img src="https://d.musicapp.migu.cn/data/resource-service/file-down/00/0r/cd/av"
             alt="Song Image" class="song-image">
        <div class="song-name">Song Name</div>

        <div class="current-time" id="currentTimeLabel">00:00</div>
        <div class="progress-container">
            <div class="progress-bar blue" id="progressBar"></div>
        </div>
        <div class="total-time" id="totalTimeLabel">00:00</div>
        <div class="control-buttons">
            <img id="volumeControl" src="./img/voice.png"/>
            <img id="loopControl" src="./img/loop-none.png"/>
        </div>
    </div>
    <audio id="audioPlayer" controls></audio>
</div>
<!--    <div style="width: 180px; height: 140px; position:absolute; bottom:10px; right:10px">-->
<!--        <script type="text/javascript" src="player/sewise.player.min.js">-->

<!--        </script>-->
<!--        <script type="text/javascript"> SewisePlayer.setup({-->
<!--                server: "vod",-->
<!--                type: "mp3",-->
<!--                videourl: "http://jackzhang1204.github.io/materials/where_did_time_go.mp3",-->
<!--                skin: "vodWhite",-->
<!--                autostart: "false",-->
<!--            });-->
<!--        </script>-->
<!--    </div>-->

<script>
    document.getElementById('playPauseButton').addEventListener('click', function () {
        const audioPlayer = document.getElementById('audioPlayer');
        if (audioPlayer.paused) {
            audioPlayer.play();
            document.getElementById('playPauseButton').src = './img/pasue.png';
        } else {
            audioPlayer.pause();
            document.getElementById('playPauseButton').src = './img/start.png';
        }
    });

    document.getElementById('volumeControl').addEventListener('click', function () {
        const audioPlayer = document.getElementById('audioPlayer');
        if (audioPlayer.muted) {
            audioPlayer.muted = false;
            document.getElementById('volumeControl').src = './img/voice.png'
        } else {
            audioPlayer.muted = true;
            document.getElementById('volumeControl').src = './img/voice-none.png'
        }
    });

    document.getElementById('loopControl').addEventListener('click', function () {
        const audioPlayer = document.getElementById('audioPlayer');
        if (audioPlayer.loop) {
            audioPlayer.loop = false;
            document.getElementById('loopControl').src = './img/loop-none.png'
        } else {
            audioPlayer.loop = true;
            document.getElementById('loopControl').src = './img/loop.png'
        }
    });


</script>
</body>


</html>